<!--
 * @Author: your name
 * @Date: 2021-08-06 11:03:52
 * @LastEditTime: 2021-08-06 17:04:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \系统学习\VueProject\vue02\tabbar\src\components\tabbar\TabBarItem.vue
-->
<template>
<!-- 所有的item都展示同一个图片，同一个文字 -->
    <div class="tab-bar-item" @click="itemClick">
        <!-- 为了不让这里写死，可以使用插槽 动态决定两个东西-->
        <div v-if="!isActive"><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <!-- 常规的思路是在slot里面绑定一个类来控制样式，但是整个插槽是会被替换掉的 -->
        <!-- <slot :class="{active:isActive}" name="item-text"></slot> -->
        <!-- <div :class="{active:isActive}"><slot name="item-text"></slot></div> -->
        <div :style="activeStyle"><slot name="item-text"></slot></div>
        
       
    </div>
</template>

<script>
export default {
    name:'TabBarItem',
    props:{
      path:String,
      activeColor:{
        type:String,
        default:'red'
      }
    },
    data(){
      return {
        // isActive:true
      }
    },
    computed:{
      isActive(){
        // /home -> item1(/home) = true
        // /home -> item1(/category) = false
        // /home -> item1(/cart) = false
        // /home -> item1(/profile) = false
        return this.$route.path.indexOf(this.path) !== -1 
      },
      activeStyle(){
        return this.isActive ? {color:this.activeColor} : {}
      }
    },
    methods:{
      itemClick(){
        this.$router.replace(this.path)
      }
    }
};
</script>

<style scoped>
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
  font-size: 14px;
}
.tab-bar-item img {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  vertical-align: middle;
  margin-bottom: 2px;
}

</style>
